<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="￥126560">
            <template slot="charts">
              <span
                >周同比&nbsp;&nbsp;&nbsp;&nbsp;56.67%<svg
                  t="1685172284615"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4121"
                  width="16"
                  height="16"
                >
                  <path
                    d="M541.866667 285.866667l345.6 345.6c17.066667 17.066667 17.066667 42.666667 0 59.733333-8.533333 8.533333-19.2 12.8-29.866667 12.8H168.533333c-23.466667 0-42.666667-19.2-42.666666-42.666667 0-10.666667 4.266667-21.333333 12.8-29.866666l343.466666-345.6c17.066667-17.066667 42.666667-17.066667 59.733334 0z"
                    fill="#515151"
                    p-id="4122"
                  ></path></svg
              ></span>
              <span
                >日同比&nbsp;&nbsp;20.43%<svg
                  t="1685172284615"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4121"
                  width="16"
                  height="16"
                >
                  <path
                    d="M541.866667 285.866667l345.6 345.6c17.066667 17.066667 17.066667 42.666667 0 59.733333-8.533333 8.533333-19.2 12.8-29.866667 12.8H168.533333c-23.466667 0-42.666667-19.2-42.666666-42.666667 0-10.666667 4.266667-21.333333 12.8-29.866666l343.466666-345.6c17.066667-17.066667 42.666667-17.066667 59.733334 0z"
                    fill="#515151"
                    p-id="4122"
                  ></path></svg
              ></span>
            </template>
            <template slot="footer">
              <span>日销售额 ￥4335</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="88430">
            <template slot="charts">
              <lineChart></lineChart>
            </template>
            <template slot="footer">
              <span>日访问量 3443</span>
            </template>
          </Detail>
        </el-card></el-col
      >
      <el-col :span="6">
        <el-card
          ><Detail title="支付数量" count="48985">
            <template slot="charts">
              <barChart></barChart>
            </template>
            <template slot="footer">
              <span>日支付数3443</span>
            </template>
          </Detail>
        </el-card></el-col
      >
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="79%">
            <template slot="charts">
              <ProgressCharts></ProgressCharts>
            </template>
            <template slot="footer">
              <span
                >周同比&nbsp;&nbsp;&nbsp;&nbsp;56.67%<svg
                  t="1685172284615"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4121"
                  width="16"
                  height="16"
                >
                  <path
                    d="M541.866667 285.866667l345.6 345.6c17.066667 17.066667 17.066667 42.666667 0 59.733333-8.533333 8.533333-19.2 12.8-29.866667 12.8H168.533333c-23.466667 0-42.666667-19.2-42.666666-42.666667 0-10.666667 4.266667-21.333333 12.8-29.866666l343.466666-345.6c17.066667-17.066667 42.666667-17.066667 59.733334 0z"
                    fill="#515151"
                    p-id="4122"
                  ></path></svg
              ></span>
              <span
                >日同比&nbsp;&nbsp;20.43%<svg
                  t="1685172284615"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4121"
                  width="16"
                  height="16"
                >
                  <path
                    d="M541.866667 285.866667l345.6 345.6c17.066667 17.066667 17.066667 42.666667 0 59.733333-8.533333 8.533333-19.2 12.8-29.866667 12.8H168.533333c-23.466667 0-42.666667-19.2-42.666666-42.666667 0-10.666667 4.266667-21.333333 12.8-29.866666l343.466666-345.6c17.066667-17.066667 42.666667-17.066667 59.733334 0z"
                    fill="#515151"
                    p-id="4122"
                  ></path></svg
              ></span>
            </template>
          </Detail> </el-card
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "./Detail/index.vue";
import lineChart from "./lineChart";
import barChart from "./barChart";
import ProgressCharts from "./ProgressCharts";
export default {
  name: "Card",
  components: { Detail, lineChart, barChart, ProgressCharts },
};
</script>

<style>
</style>